<!--
 * @Author: 严晗 823841034@qq.com
 * @Date: 2023-10-23 20:05:05
 * @LastEditors: 严晗 823841034@qq.com
 * @LastEditTime: 2023-12-06 19:07:20
 * @FilePath: /yike-admin/Users/yanhan/vite-project/src/components/SearchForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 
 * searchOptions 参数说明如下：
 * label: 搜索框的名称
 * value: 搜索框的默认值
 * component：组件名称 - el-input、el-select
 * customContent：自定义组件，仅日期组件有效（日期必传）
 * type：日期组件的类型（参考elementPlus文档）
 * attrs：组件额外的配置类型（例如日期的 format、文本框的disabled都可以通过此对象来配置，默认可以为空对象{}）
 -->
<template>
	<div class="search-form">
		<el-form :inline="true" :model="searchFormModel" ref="searchFormRef" size="small" class="demo-form-inline">
			<el-row :gutter="gutter">
				<el-col :span="screenSpan || span" v-for="(item, key) in searchOptions" :key="key">
					<el-form-item :label="item.label" :prop="key">
						<!-- 这里需要分为两块代码进行区分 -->
						<!-- 1、日期、时间 组件 -->
						<template v-if="item.component === 'el-date-picker' && item.customContent">
							<el-date-picker v-model="searchFormModel[key]" v-bind="item.attrs" clearable :editable="false" :type="item.type || 'date'" style="width: 250px" placeholder="选择日期" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
						</template>
						<!-- 默认是下拉框组件，其他的均按照传入的组件来渲染 -->
						<component :is="item.component" v-bind="item.attrs" v-model="searchFormModel[key]" clearable v-if="!item.customContent" style="width: 250px" :placeholder="(item.component === 'el-select' ? '请选择' : '请输入') + item.label">
							<!-- 2、下拉框 组件 -->
							<template #default v-if="item.component === 'el-select'">
								<el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label"></el-option>
							</template>
						</component>
					</el-form-item>
				</el-col>
				<el-col :span="screenSpan || btnSpan" v-if="searchBtn || clearBtn" style="display: flex" class="justify-center items-center">
					<el-form-item>
						<el-button type="primary" v-if="searchBtn" @click="search"><el-icon class="mr-1"><Search /></el-icon>搜索</el-button>
						<el-button v-if="clearBtn" @click="clear"><el-icon class="mr-1"><Delete /></el-icon>清空</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import 'dayjs/locale/zh-cn'

let searchFormModel = reactive({})

const searchFormRef = ref(null)
// 设置emit方法
const emit = defineEmits(['search', 'clear'])
const search = () => {
	emit('search', searchFormModel)
}
const clear = () => {
	// 通过ref重置表单
	searchFormRef.value.clearValidate()
	searchFormRef.value.resetFields()
	emit('clear')
}

// 设置props
const props = defineProps({
	gutter: {
		// 列间距
		type: Number,
		default: 20,
	},
	span: {
		// 栅格列数
		type: Number,
		default: 6,
	},
	btnSpan: {
		// 按钮栅格列数，24时单独成行，居中显示
		type: Number,
		default: 24,
	},
	// 搜索按钮
	searchBtn: {
		type: Boolean,
		default: true,
	},
	// 清空按钮
	clearBtn: {
		type: Boolean,
		default: true,
	},
	searchOptions: Object, // 搜索配置的参数数据
})

// 设置搜索默认值
const { searchOptions } = props
if (searchOptions) {
	for (let key in searchOptions) {
		searchFormModel[key] = searchOptions[key].value
	}
}

// 根据屏幕宽度重新设置 span 的值
import { getScreen } from '~/composables/utils'
const screenSpan = ref(0)
if(getScreen() <= 1){
	screenSpan.value = 12
}
</script>
